<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link th:href="@{/css/bootstrap.min.css}" media="screen" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" th:href="@{/bootstrap-4.5.0-dist/css/bootstrap.min.css}" />
		<title>
		</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.span_style{
				width: 70%;
				margin: 0 auto;
				display: inline-block;
				display: flex;
				flex-direction: row;
			}
			.img_div{
				width: 70px;
				height: 70px;
				background-size: contain;
				display:flex;
				align-items:center;
				justify-content:center;
				margin-left: 20px;
				margin-top: 5px;
				margin-right: 20px;
				float: left;
				
			}
			img{
				width: 100%;
				height: auto;
			}
			.message_div{
				width: 100%;
				height: 100%;
				padding: 0px;
				
				
				display: flex;
				flex-direction: column;
			}
			
			td{
				text-align: center;
				vertical-align: middle;
			}
			nav a, footer a {
				color: white;
				height: 40px;
				line-height: 40px;
				text-decoration: none;
			}

			nav a:hover,footer a:hover{
				color: red;
			}
			#topbar{
				background: #20C997;
				height: 30px;
			}
			#ba{
				margin-left: 900px;
			}
			#ba a{
				color: #ffffff;
			}
			#bottombar{
				background-color: #20C997;
			}
			
			
		</style>
	</head>
	<body>
	<nav class="navbar navbar-expand-lg navbar-light" id="topbar">
	   <span>
        <img th:src="@{/img/nav.png}" alt="" style="width: 110px;height: 40px;">
    </span>
		<div class="collapse navbar-collapse" id="navbarSupportedContent">
			<ul class="navbar-nav mr-auto" id="ba">
				<li class="nav-item activity" >
					<a class="nav-link"  th:href="@{/}" >首页</a>
				</li>
				<li class="nav-item activity" >
					<a class="nav-link" href="#">我的购物车</a>
				</li>
				<li class="nav-item" >
					<a class="nav-link" href="#">我的订单</a>
				</li>
				<li id="price2" style="position: relative;z-index: 999;" >
					<a class="nav-link" href="#" >我的余额</a>
					<div id="dv" style="position: absolute;display:none;top: 30px;right: 5px;font-size: 20px;color: red;z-index: 9999;" th:text="${money}"></div>
				</li>
				<li class="nav-item" >
					<a class="nav-link" href="#">个人中心</a>
				</li>
			</ul>
		</div>
	</nav>
		<div class="span_style">
			
				<table class="table table-bordered table-hover"
				data-pagination="true"
				data-side-pagination="client"
				data-page-size="1">
				    <thead>  
				        <tr class="success">
				            <th style="border: none;text-align: center;background-color: #D1FDDE;width: 30%;">订单编号</th>
				            <th style="border: none;text-align: center;background-color: #D1FDDE;width: 30%;">购买物品编号</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">数量</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">交易状态</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;width: 10%;">交易操作</th>
							
				        </tr>  
				    </thead>  
				    <tbody>  
				        <tr th:each="order:${orders}">
				            <td style="vertical-align: middle;">
								<div class="img_div">
									<img th:src="@{/img/building.png}" />
								</div>
								<div>
									<p  style="margin-top: 10px;" th:text="${order.getMedId()}">千年人参</p>
									<div style="width: auto;text-align: center;margin-top: 10px;">
										<p style="float: left;font-size: 10px;margin-right: 10px;background-color: greenyellow;">订单编号</p>
										<p style="float: left;font-size: 10px;">409228291828</p>
									</div>
									
								</div>
							</td>
				            <td style="vertical-align: middle;" th:text="${order.getMedId()}">$</td>
				            <td style="vertical-align: middle;" th:text="${order.getQuantity()}">$</td>
				            <td style="vertical-align: middle;" th:text="${order.getState()}"></td>
							<td style="display: flex;flex-direction: column;vertical-align: middle;">
								<button type="button" class="btn btn-danger" style="outline: none;margin-bottom: 10px;">申请退款</button>
								<button type="button" class="btn btn-success" style="outline: none;">确认收货</button>
							</td> 
							
				 
				        
				    </tbody>  
				</table>
			
		</div>
	<script th:src="@{/js/jquery-3.3.1.js}"></script>
	<script>
		$(function () {
			$("#price2").mouseover(function () {
				$("#dv").css("display","block");
			});
			$("#price2").mouseout(function () {
				$("#dv").css("display","none");
			});
		});
	</script>
	</body>
</html>
